<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿t.sina.com.cn邮件补全</title>
<meta http-equiv="x-ua-compatible" content="ie=7" />
<style>
* { margin:0; padding:0;}
ul li { list-style-type:none}
body {font-family:arial;font-size:12px;}
#register .ctopbody{ padding-bottom:20px; padding-top:10px;}
.register-title { font-size:14px; margin:20px 0 10px 80px;}
.register-title	strong { color:#006633; font-weight:bold;}
.register-wrap { float:left; margin-left:80px}
.register-form-line, register-rule { margin:10px 0;}
.register-form .register-form-line label{ display:block; font-size:14px; margin-bottom:5px;}
.register-form .txt { padding:2px 0 0 2px;}
.register-form #username { width:120px;}
.register-form #password { width:120px;}
.register-form #email  { width:150px;}
.form-msg { color: #999; height:25px; line-height:25px; }
.error-msg { color: #FF0000}
.special {color:green;}
#rule { margin-right:5px; vertical-align:middle;}

.emailsug { background:#fff;border: 1px solid #ccc; border-right-color:#666; border-bottom-color:#666;position: absolute;}
.emailsug li { height:20px; line-height:20px; padding-left:5px;}
.emailsug li.sugactive{ background: #E3E9FF;}
</style>
</head>
<body id="register" >

<h2 class="register-title">欢迎您入住邻里帮 - <strong>有爱，分享，互助，交流</strong>的社区</h2>
<div class="register-wrap">
<form class="register-form">
	<div class="register-form-line"><label for="username">用户名：</label><input type="text" name="username" id="username" class="txt"/>
		<div class="form-msg">不超过14个字符，一个汉字两个字符(数字，字母和下划线)</div>
	</div>
	<div class="register-form-line"><label for="password">登录密码：</label><input type="password" name="password" id="password" class="txt"/><div class="form-msg">密码长度6-14个字符</div></div>
	<div class="register-form-line"><label for="email">电子邮件地址：</label><input type="text" name="email" id="email"class="txt" email="true" autocomplete="off"/><div class="form-msg special">As u type, it will autocomplete your email</div></div>
	<div class="register-form-line"> <input type="submit" value="提交注册"/></div>
	<div class="register-rule"><input type="checkbox" name="rule" id="rule" checked="checked"/><label for="rule">我已看过并同意<a href="">《邻里帮网络服务使用协议》</a></label></div>
</form>
</div>
</body>
</html>
<script src="http://snjs.sinaapp.com/sn.js"></script>
<script>
function getAbsPosition(obj){
			var xy = [0,0];
			while(obj){
				xy[0] += parseInt(obj.offsetLeft);
				xy[1] += parseInt(obj.offsetTop);
				obj = obj.offsetParent;
			}
			return xy;
		};
function getSelfHeightWidth(obj){
			return [obj.offsetWidth, obj.offsetHeight];
		};
	function emailSug( arg ){
		var opts = {
			inputEle: null,
			autoNext: null,
			emailList: ['163.com', '126.com', 'yeah.net', 'sina.com', 'yahoo.com.cn', 'gmail.com', 'sohu.com', 'tom.com', 'hotmail.com']
		},
		sugLayer = null,
		currentItem = 0;
		SN.extend(opts, arg);
		init();

		function init(){
			SN.event.addEvent(SN.$(opts.inputEle), 'keyup', function(){
				var e = SN.event.getEvent();
				stdIn(e);
			});
			SN.event.addEvent(SN.$(opts.inputEle), 'keydown', function(){
				var e = SN.event.getEvent();
				if(e.keyCode == 13){
					e.preventDefault();
					e.stopPropagation();
				}
			});
		};
		function initUI(){
			var xy = getAbsPosition(opts.inputEle);
			var hw = getSelfHeightWidth(opts.inputEle);
			sugLayer = document.createElement('ul');
			sugLayer.className = 'emailsug';
			sugLayer.style.width = '200px';
			sugLayer.style.left = xy[0] + 'px';
			sugLayer.style.top = xy[1] + hw[1] + 'px';
			document.body.appendChild(sugLayer);
		};
		function stdIn(e){
			//控制键 并且 输入框已经有输入
			var ctrlMap = {
				38: 'up',
				40: 'down',
				13: 'enter',
				32: 'space'
			};
			if(ctrlMap[e.keyCode]){
				if(sugLayer && sugLayer.style.display == 'block'){
					parseCtrl(ctrlMap[e.keyCode]);
				}
			}else{
				if(!sugLayer){
					initUI();
				}
				suggest(opts.inputEle.value);
			}
		};
		function parseCtrl( ctrl ){
			var ctrl2direct = {
				'up': -1, 
				'down': 1
			};
			if(ctrl == 'enter'){
				setValue();
				return;
			};
			highlight(ctrl2direct[ctrl] + currentItem);
		};
		function highlight(i){
			var data = sugLayer.getElementsByTagName('li');
			data[currentItem].className = '';
			if(i == data.length){
				i = 0;
			}
			if(i == -1){
				i = data.length - 1;
			}
			data[i].className = 'sugactive';
			currentItem = i;
		};
		function setValue(){
			var data = sugLayer.getElementsByTagName('li');
			SN.$(opts.inputEle).value = data[currentItem].innerHTML;
			sugLayer.style.display = 'none';
			currentItem = 0;
			
			if(opts.autoNext != null){
				focusNext();
			};
		};
		function suggest(value){
			var i,
				htmlstr = '',
				data = [];
			
			/*处理逻辑
			  检测有没有@
			  没有@则匹配所有的邮箱
			  有@则获取@后面的部分进行匹配
			*/
			if(value == ''){
				sugLayer.style.display = 'none';
				return
			}
			var t1 = value.split('@');

			for(i = 0; i < opts.emailList.length; i++){
				if(t1.length == 2 && opts.emailList[i].indexOf(t1[1]) == 0){
					data.push('<li>'+t1[0]+'@' + opts.emailList[i]+'</li>');
				}else if(t1.length == 1){
					data.push('<li>' + value + '@' + opts.emailList[i]+'</li>');
				}
			};
			if(data.length == 0){
				return;
			};
			sugLayer.innerHTML = data.join('');
			sugLayer.style.display = 'block';
			bindSuglistEvent();
			highlight(0);
		};
		function bindSuglistEvent(){
			var that = this;
			var data = sugLayer.getElementsByTagName('li');
			for(var i = 0; i < data.length; i++){
				data[i].onmouseover = function(arg){
					return function(){
						highlight(arg);
					}
				}(i);
				data[i].onclick = function(){
						setValue();
				};
			}
		};
		function focusNext(){
			SN.$(opts.autoNext).focus();
		};
	};
	emailSug({inputEle: SN.$('email'), autoNext: 'username',emailList:['qq.com', 'foxmail.com', 'cqu.edu.cn']});
</script>